<template>
  <div>
    <!-- <el-checkbox v-model="checkAll" @change="handleCheckAllChange">
      全选
    </el-checkbox> -->
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
      :max="1"
    >
      <el-checkbox v-for="date in tableData" :label="date" :key="date.b">
        <span>
          <i :class="date.class"></i>
          {{ date.date }}
        </span>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
const cityOptions = [
  { class: 'iconfont icon-weixinzhifu', date: '微信支付' },
  {
    class: 'iconfont icon-zhifubaozhifu',
    date: '支付宝支付',
  },
  {
    class: 'iconfont icon-yinhangqiazhifu',
    date: '银行卡支付',
  },
  {
    class: 'iconfont icon-yinxingqiazhifu',
    date: '信用卡支付',
  },
]
export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      tableData: cityOptions,
    }
  },
  methods: {
    handleCheckAllChange(val) {
      console.log(val)
      this.checkedCities = val ? cityOptions : []
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.tableData.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableData.length
    },
  },
}
</script>
